import React from 'react';
import Countdown from 'react-countdown';
import moment from 'dayjs'
import { View } from '@tarojs/components'
const CountdownTimer = (props) => {
  const { time, endTime, onShare } = props
  // 活动的目标日期，格式为年、月、日
  const targetDate = moment(time, 'YYYY-MM-DD HH:mm'); // 月份从0开始，这里是12月31日

  // 计算目标日期与当前日期之间的时间差（毫秒）
  const timeDifference = targetDate - new Date();

  // 自定义渲染倒计时组件的方法
  const renderer = ({ days, hours, minutes, seconds, completed }) => {
    if (completed) {
      return <View className='liveInteraction_live_starlive'>直播即将开始，请耐心等待</View>;
    } else {
      // 渲染倒计时
      return (
        <View className='liveInteraction_live_starContent'>
          <View className='liveInteraction_live_startTitle'>距离开播还剩</View>
          <View className='liveInteraction_live_startTime'>
            {days ? <>
              <View className='liveInteraction_live_startTimeBox'>{days}</View>
              <View className='liveInteraction_live_startTimeSize'>天</View>
            </> : null}
            {hours ? <>
              <View className='liveInteraction_live_startTimeBox'>{hours}</View>
              <View className='liveInteraction_live_startTimeSize'>时</View>
            </> : null}
            {minutes ? <>
              <View className='liveInteraction_live_startTimeBox'>{minutes}</View>
              <View className='liveInteraction_live_startTimeSize'>分</View>
            </> : null}
            <>
              <View className='liveInteraction_live_startTimeBox'>{seconds ? seconds : 0}</View>
              <View className='liveInteraction_live_startTimeSize'>秒</View>
            </>
          </View>
          <View className='liveInteraction_live_btn' onClick={() => onShare()}>去分享</View>
        </View>

      );
    }
  };

  return (
    <span>
      <Countdown date={Date.now() + timeDifference} renderer={renderer} />
    </span>
  );
};

export default CountdownTimer;